<template>
  <div class="test-session">
    <h2>Session测试页面</h2>
    
    <div class="test-section">
      <h3>1. 测试登录</h3>
      <el-form :model="loginForm" style="max-width: 400px">
        <el-form-item label="用户名">
          <el-input v-model="loginForm.userAccount" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="loginForm.userPassword" type="password" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="testLogin" :loading="loginLoading">
            测试登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="test-section">
      <h3>2. 测试获取用户信息</h3>
      <el-button type="success" @click="testGetUserInfo" :loading="userInfoLoading">
        测试获取用户信息
      </el-button>
    </div>

    <div class="test-section">
      <h3>3. 测试结果</h3>
      <div class="result-box">
        <pre>{{ testResults }}</pre>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import request from '@/utils/request'
import { ElMessage } from 'element-plus'

const loginForm = ref({
  userAccount: 'zhangsan',
  userPassword: '123456789'
})

const loginLoading = ref(false)
const userInfoLoading = ref(false)
const testResults = ref('')

const addResult = (message) => {
  const timestamp = new Date().toLocaleTimeString()
  testResults.value += `[${timestamp}] ${message}\n`
}

const testLogin = async () => {
  loginLoading.value = true
  addResult('开始测试登录...')
  
  try {
    // 检查axios配置
    addResult(`axios配置检查:`)
    addResult(`- baseURL: ${request.defaults.baseURL}`)
    addResult(`- withCredentials: ${request.defaults.withCredentials}`)
    addResult(`- timeout: ${request.defaults.timeout}`)
    
    const response = await request.post('/user/login', {
      userAccount: loginForm.value.userAccount,
      userPassword: loginForm.value.userPassword
    })
    
    addResult(`登录响应: ${JSON.stringify(response, null, 2)}`)
    
    // 检查cookie
    addResult(`当前cookies: ${document.cookie}`)
    
    if (response && response.code === 0) {
      ElMessage.success('登录成功')
      addResult('登录成功！')
    } else {
      ElMessage.error(response.message || '登录失败')
      addResult(`登录失败: ${response.message}`)
    }
  } catch (error) {
    addResult(`登录错误: ${error.message}`)
    if (error.response) {
      addResult(`错误响应: ${JSON.stringify(error.response.data, null, 2)}`)
    }
    ElMessage.error('登录请求失败')
  } finally {
    loginLoading.value = false
  }
}

const testGetUserInfo = async () => {
  userInfoLoading.value = true
  addResult('开始测试获取用户信息...')
  
  try {
    // 检查cookie
    addResult(`请求前cookies: ${document.cookie}`)
    
    const response = await request.get('/user/get/login')
    
    addResult(`用户信息响应: ${JSON.stringify(response, null, 2)}`)
    
    if (response && response.code === 0) {
      ElMessage.success('获取用户信息成功')
      addResult('获取用户信息成功！')
    } else {
      ElMessage.error(response.message || '获取用户信息失败')
      addResult(`获取用户信息失败: ${response.message}`)
    }
  } catch (error) {
    addResult(`获取用户信息错误: ${error.message}`)
    if (error.response) {
      addResult(`错误响应: ${JSON.stringify(error.response.data, null, 2)}`)
    }
    ElMessage.error('获取用户信息请求失败')
  } finally {
    userInfoLoading.value = false
  }
}
</script>

<style scoped>
.test-session {
  padding: 20px;
}

.test-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
}

.result-box {
  background-color: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
  max-height: 400px;
  overflow-y: auto;
  font-family: monospace;
  white-space: pre-wrap;
}
</style>